<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H&M</title>

    <link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        #touxiang{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }

 
    </style>

</head>
<body>
    <!-- 顶部 -->
    <div class="container-fluid">
        <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid"> 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-lock"></span>登陆</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-check"></span>注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-off"></span>安全退出</a></li> 
                    
                    <!-- 在用框架的使用，任何一个标签都会存在一些样式 -->
                    <li><img src="../images/头像.png" id="touxiang"></li>
                </ul>
            </div>
            </div>
        </nav>
        </div>
    </div>

    <div align="center">
       
            <a class="logo" href="javascript:void (0)">
                <img src="../images/HM.png" alt="">
                
            </a>
        
    </div>

    <!-- 导航 -->
    <!--======================================导航区=======================================-->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display  -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="../images/logo.png" alt=""></a>
        </div> 

         <!-- Collect the nav links, forms, and other content for toggling  -->
         <div class="container">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="sorts sorts1">
                        <a href="javascript:void (0)">全部商品分类 &gt;&gt;</a>
                    </li>
                    
                    <li><a href="javascript:void (0)">女士</a></li>
                   
                    <li><a href="javascript:void (0)">少女</a></li>
                    
                    <li><a href="javascript:void (0)">男士</a></li>
                   
                    <li><a href="javascript:void (0)">儿童</a></li>
                   
                    <li><a href="javascript:void (0)">家居</a></li>
                   
                    <li><a href="javascript:void (0)">大减价</a></li>
                  
                </ul>
            </div>
        </div> 
    </div>
</nav>

<div align="center">
    <img src="../images/HM1.jpg" alt="">
</div>


<div align="center">
    <h1>女士推荐</h1>
</div>

<!-- 女士推荐 -->
<div class="container-fluid "  style="margin-top: 10px;">
    <div class="row">
        <div class="col-md-3">
             <div class="thumbnail">
                
                <img src="../images/女装图4.jpg" 
                 alt="通用的占位符缩略图">
                <div class="caption">
                    <a href="../work/商品详情.html"><h4 class="text-center" class="">连帽上衣</h4></a>
                    <h4 class="text-center" class="">￥150</h4>
                    <p class="text-warning pull-right">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                    </p>
                    <p class="text-danger">
                        <span class="glyphicon glyphicon-heart"></span>

                    </p>
                </div>
             </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
               
               <img src="../images/女2.jpg" 
                alt="通用的占位符缩略图">
               <div class="caption">
                   <a href="#"><h4 class="text-center" class="">雪尼尔套衫</h4></a>
                   <h4 class="text-center" class="">￥120</h4>
                   <p class="text-warning pull-right">
                       <span class="glyphicon glyphicon-shopping-cart"></span>
                   </p>
                   <p class="text-danger">
                       <span class="glyphicon glyphicon-heart"></span>

                   </p>
               </div>
            </div>
       </div>

       <div class="col-md-3">
        <div class="thumbnail">
           
           <img src="../images/女3.jpg" 
            alt="通用的占位符缩略图">
           <div class="caption">
               <a href="#"><h4 class="text-center" class="">箱型棉服</h4></a>
               <h4 class="text-center" class="">￥250</h4>
               <p class="text-warning pull-right">
                   <span class="glyphicon glyphicon-shopping-cart"></span>
               </p>
               <p class="text-danger">
                   <span class="glyphicon glyphicon-heart"></span>

               </p>
           </div>
        </div>
   </div>

   <div class="col-md-3">
    <div class="thumbnail">
       
       <img src="../images/女4.jpg" 
        alt="通用的占位符缩略图">
       <div class="caption">
           <a href="#"><h4 class="text-center" class="">卫衣</h4></a>
           <h4 class="text-center" class="">￥50</h4>
           <p class="text-warning pull-right">
               <span class="glyphicon glyphicon-shopping-cart"></span>
           </p>
           <p class="text-danger">
               <span class="glyphicon glyphicon-heart"></span>

           </p>
       </div>
    </div>
</div>


<div align="center">
    <h1>男士推荐</h1>
</div>


<!-- 男士推荐 -->
<div class="container-fluid "  style="margin-top: 10px;">
    <div class="row">
        <div class="col-md-3">
             <div class="thumbnail">
                
                <img src="../images/男1.jpg" 
                 alt="通用的占位符缩略图">
                <div class="caption">
                    <a href="#"><h4 class="text-center" class="">连帽羽绒服</h4></a>
                    <h4 class="text-center" class="">￥750</h4>
                    <p class="text-warning pull-right">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                    </p>
                    <p class="text-danger">
                        <span class="glyphicon glyphicon-heart"></span>

                    </p>
                </div>
             </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
               
               <img src="../images/男2.jpg" 
                alt="通用的占位符缩略图">
               <div class="caption">
                   <a href="#"><h4 class="text-center" class="">夹棉外套</h4></a>
                   <h4 class="text-center" class="">￥200</h4>
                   <p class="text-warning pull-right">
                       <span class="glyphicon glyphicon-shopping-cart"></span>
                   </p>
                   <p class="text-danger">
                       <span class="glyphicon glyphicon-heart"></span>

                   </p>
               </div>
            </div>
       </div>

       <div class="col-md-3">
        <div class="thumbnail">
           
           <img src="../images/男3.jpg" 
            alt="通用的占位符缩略图">
           <div class="caption">
               <a href="#"><h4 class="text-center" class="">箱型棉服</h4></a>
               <h4 class="text-center" class="">￥250</h4>
               <p class="text-warning pull-right">
                   <span class="glyphicon glyphicon-shopping-cart"></span>
               </p>
               <p class="text-danger">
                   <span class="glyphicon glyphicon-heart"></span>

               </p>
           </div>
        </div>
   </div>

   <div class="col-md-3">
    <div class="thumbnail">
       
       <img src="../images/男4.jpg" 
        alt="通用的占位符缩略图">
       <div class="caption">
           <a href="#"><h4 class="text-center" class="">连帽卫衣</h4></a>
           <h4 class="text-center" class="">￥70</h4>
           <p class="text-warning pull-right">
               <span class="glyphicon glyphicon-shopping-cart"></span>
           </p>
           <p class="text-danger">
               <span class="glyphicon glyphicon-heart"></span>

           </p>
       </div>
    </div>
</div>


<div align="center">
    <h1>儿童推荐</h1>
</div>


<!-- 儿童推荐 -->
<div class="container-fluid "  style="margin-top: 10px;">
    <div class="row">
        <div class="col-md-3">
             <div class="thumbnail">
                
                <img src="../images/儿1.jpg" 
                 alt="通用的占位符缩略图">
                <div class="caption">
                    <a href="#"><h4 class="text-center" class="">女童 80%羽绒填充连帽羽绒服</h4></a>
                    <h4 class="text-center" class="">￥280</h4>
                    <p class="text-warning pull-right">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                    </p>
                    <p class="text-danger">
                        <span class="glyphicon glyphicon-heart"></span>

                    </p>
                </div>
             </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
               
               <img src="../images/儿2.jpg" 
                alt="通用的占位符缩略图">
               <div class="caption">
                   <a href="#"><h4 class="text-center" class="">婴儿 外套和长裤</h4></a>
                   <h4 class="text-center" class="">￥90</h4>
                   <p class="text-warning pull-right">
                       <span class="glyphicon glyphicon-shopping-cart"></span>
                   </p>
                   <p class="text-danger">
                       <span class="glyphicon glyphicon-heart"></span>

                   </p>
               </div>
            </div>
       </div>

       <div class="col-md-3">
        <div class="thumbnail">
           
           <img src="../images/儿3.jpg" 
            alt="通用的占位符缩略图">
           <div class="caption">
               <a href="#"><h4 class="text-center" class="">男童 毛绒连帽外套</h4></a>
               <h4 class="text-center" class="">￥90</h4>
               <p class="text-warning pull-right">
                   <span class="glyphicon glyphicon-shopping-cart"></span>
               </p>
               <p class="text-danger">
                   <span class="glyphicon glyphicon-heart"></span>

               </p>
           </div>
        </div>
   </div>

   <div class="col-md-3">
    <div class="thumbnail">
       
       <img src="../images/儿4.jpg" 
        alt="通用的占位符缩略图">
       <div class="caption">
           <a href="#"><h4 class="text-center" class="">婴儿 毛绒连帽外套</h4></a>
           <h4 class="text-center" class="">￥90</h4>
           <p class="text-warning pull-right">
               <span class="glyphicon glyphicon-shopping-cart"></span>
           </p>
           <p class="text-danger">
               <span class="glyphicon glyphicon-heart"></span>

           </p>
       </div>
    </div>
</div>
</body>
</html>